<template>
  <div>
    <el-popover
        :placement="position"
        trigger="click"
        :width="width"
        ref="popoverTags"
        popper-class="remove-tags-class"
        @hide="destroyPop"
        :disabled="disabled"
    >
      <template #default>
        <el-table
            highlight-current-row
            max-height="200"
            :show-header="false"
            :data="tagList" style="width: 100%"
            :row-style="{ height: '30px' }"
            :cell-style="{ padding: '0 5px' }"

        >
          <el-table-column>
            <template #default="scope">
              <el-button
                  type="text"
                  @click="choose(scope.row)" style="
                width: 100%;
                text-align: left;
                cursor: pointer;
                font-size: 15px;
              "
              ><i class="el-icon-collection-tag"/>{{ scope.row.vocabulary }}: {{ scope.row.vocabularyTerm }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #reference>
        <el-input
            :size="size"
            placeholder="请输⼊内容"
            label-width="100px"
            v-model="query"
        >
          <template #suffix>
            <i class="el-icon-plus" style="cursor: pointer"></i>
          </template>
        </el-input>
      </template>
    </el-popover>
    <el-tag
        closable
        style="font-size: 10px; margin-top: 5px"
        type="success"
        @close="handleCloseTag(tag)"
        disable-transitions
        v-for="tag in string2List(sonTags)"
        :key="tag.vocabulary"
    >
      <i class="el-icon-collection-tag"/>{{ tag.vocabulary }}
      <el-divider direction="vertical"></el-divider>
      {{ tag.vocabularyTerm }}
    </el-tag>
  </div>
</template>

<script>
import {SearchVocabularyTerms} from "@/api/thing";

export default {
  name: "datatagsPopover",
  props: {
    width: {
      type: Number,
      default: 300,
    },
    tags: {
      type: String,
      default: "",
    },
    position: {
      type: String,
      default: "bottom",
    },
    type: {
      type: String,
      default: "DataTag",
    },
    showAdd: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "default",
    },
  },
  model: {
    prop: "tags",
    event: "choose",
  },
  data() {
    return {
      sonTags: this.tags,
      isShow: false,
      tagList: [],
      tagListQuery: [],
      query: null,
      searchParams: {
        searchExpression: "*",
        type: "DataTags",
      },
    };
  },
  created() {
    this.getList();
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme;
    },
  },
  watch: {
    sonTags: {
      handler: "getList",
    },
    tags: {
      deep: true,
      handler(newV, oldV) {
        this.sonTags = newV;
      },
    },
    query: {
      handler: "getList",
    },
  },
  methods: {
    getList() {
      if (this.query !== "" && this.query !== null) {
        this.searchParams.searchExpression = "*" + this.query + "*";
      }
      SearchVocabularyTerms(this.searchParams).then((res) => {
        this.tagListQuery = res.data.result.rows;
        let temp = this.string2List(this.sonTags);
        this.tagList = [];
        this.tagListQuery.forEach((item) => {
          if (
              temp.findIndex(
                  (i) =>
                      i.vocabularyTerm === item.vocabularyTerm &&
                      i.vocabulary === item.vocabulary
              ) === -1
          ) {
            this.tagList.push(item);
          }
        });
      });
    },
    choose(data) {
      let temp = this.string2List(this.sonTags);
      temp.push(data);
      this.sonTags = JSON.stringify(temp);
      if (this.sonTags === "[]") this.sonTags = "";
      this.$emit("choose", this.sonTags);
      this.$emit("blur", this.sonTags);
      this.$refs.popoverTags.doClose();
      this.destroyPop();
    },
    string2List(data) {
      if (data === undefined) return [];
      if (data === null) return [];
      if (data === "") return [];
      return JSON.parse(data);
    },
    handleCloseTag(tag) {
      let temp = this.string2List(this.sonTags);
      this.sonTags = JSON.stringify(
          temp.filter((i) => {
            return i.vocabularyTerm !== tag.vocabularyTerm;
          })
      );
      // if(this.sonTags === '[]') this.sonTags = ''
      this.$emit("choose", this.sonTags);
      this.$emit("blur", this.sonTags);
    },
    destroyPop() {
      for (
          let i = 0;
          i < document.getElementsByClassName("remove-tags-class").length;
          i++
      ) {
        document.getElementsByClassName("remove-tags-class")[i].remove();
      }
    },
  },
  beforeDestroy() {
    const popovers = document.getElementsByClassName("remove-tags-class");
    for (let i = 0; i < popovers.length; i++) {
      popovers[i].remove();
    }
  },
};
</script>

<style scoped>
.ep-tag {
  margin-right: 10px;
}

:deep(.ep-dialog__header) {
  padding: 0;
}

:deep(.ep-dialog__body) {
  padding: 10px 20px;
}
</style>
